<template>
    <!--首页的 轮播帖设置  编辑（添加） 页面-->
    <div>
        <!--标题-->
        <el-row>
            <el-col class="center">
                <h1>轮播帖编辑</h1>
            </el-col>
        </el-row>

        <!--页头-->
        <el-row class="page_head">
            <el-col>
                <el-page-header @back="goBack" content="编辑"></el-page-header>
            </el-col>
        </el-row>

        <!--表单内容  -- 如果接收到 carouselId 则将对应信息先渲染出来-->
        <el-row type="flex" justify="center">
            <el-col :span="10">
                <el-card shadow="never">
                    <el-form status-icon :model="carouselForm" label-width="100px" class="demo-ruleForm login_form" :rules="rules" ref="ruleForm" id="carouselForm">
                        <div>
                            <el-form-item label="帖子编号：" prop="postId" >
                                <el-input style="width: 180px;" v-model="carouselForm.postId" clearable placeholder="链接跳转的帖子编号" maxlength="4"></el-input>
                                <el-link type="primary" @click="queryPost()" class="margin_left_16">查询帖子</el-link>
                            </el-form-item>
                            <el-form-item label="描述：" prop="describe">
                                <el-input placeholder="不超过25个汉字" v-model="carouselForm.describe" clearable maxlength="30" ></el-input>
                            </el-form-item>
                            <!--头像-->
                            <el-form-item label="图片设置：" id="headImg" prop="imageUrl">
                                <!--on-change 添加文件、上传成功和上传失败时都会被调用-->
                                <el-upload
                                        ref="headImg"
                                        :on-change="handleFileChange"
                                        :auto-upload="false"
                                        name="file"
                                        class="avatar-uploader"
                                        :action="GLOBAL.serverBaseUrl + GLOBAL.userTestFile"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess"
                                        :on-error="handleAvatarError"
                                        :before-upload="beforeAvatarUpload">
                                    <img v-if="carouselForm.imageUrl" :src="carouselForm.imageUrl" class="avatar" alt="">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                        </div>
                    </el-form>
                </el-card>
                <div class="center margin_top_30">
                    <el-button type="primary" size="small" @click="submitEdit" round v-if="isEditPage">保存编辑</el-button>
                    <el-button type="success" size="small" round @click="addCarousel('ruleForm')" v-else>确定添加</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "carouselEditAdmin",
        data(){
            /*验证输入的绑定postId 有效 -- 能正确对应到一篇公开帖子*/
            var checkPidValid = (rule, value, callback) => {
                this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.postCheckValid + "/" + this.carouselForm.postId).then(req=>{
                    if (req.data.result_code === 200){
                        callback();
                    }else{
                        callback(new Error(req.data.msg));
                    }
                });
            };
            /*验证输入的绑定postId 有效 -- 只包含数字*/
            var checkPidNumber = (rule, value, callback) => {
                if (this.isNumber(value)){
                    callback();
                }else {
                    callback(new Error("绑定的帖子编号只能是数字！"));
                }
            };
            return{
                carouselForm: {  /*编辑滚动帖表单*/
                    id: 0, // 滚动帖id  在编辑滚动帖信息时有用
                    postId: '',  /*设置的跳转帖子id*/
                    describe: '',  /*描述*/
                    imageUrl: '', /*首页滚动图设置*/
                },
                isEditPage: false, /*当前打开页面 添加 还是 编辑页面  默认是添加*/

                /*表单要求，  -- 表单验证*/
                rules: {
                    postId: [
                        { required: true, message: '请输入绑定的帖子id编号！', trigger: 'blur' },
                        { validator: checkPidNumber, trigger: 'blur' },  /*检验帖子id 是否 只包含数字*/
                        { validator: checkPidValid, trigger: 'blur' }  /*检验帖子id 是否 有效*/
                    ],
                    describe: [
                        { required:true, message: '请输入类别名称！', trigger: 'blur'}, /*在失去焦点时触发*/
                        { max: 25, message: '长度最大为25个汉字！', trigger: 'blur' },
                    ],
                    imageUrl: [
                        { required:true, message: '请上传首页滚动图！', trigger: 'blur'}, /*在失去焦点时触发*/
                    ],
                },
            }
        },
        created(){  /*加载页面时执行*/

            // 接收参数（id）
            if (this.$route.query.crsId != null && this.$route.query.crsId !== ''){
                this.carouselForm.id = this.$route.query.crsId;

                // 设置当前是 编辑页面
                this.isEditPage = true;

                // 初始化该滚动帖对应的 内容信息
                this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.carouselSpInfo + "?crsId=" + this.carouselForm.id).then(req=>{
                    if (req.data !== ""){
                        if (req.data.rs.result_code === 200){ /*查询成功*/
                            /*初始化当前滚动帖信息*/
                            this.carouselForm.postId = req.data.crsInfo.postId;
                            this.carouselForm.describe = req.data.crsInfo.describe;
                            this.carouselForm.imageUrl = req.data.crsInfo.images; // 这里的图片还只是 图片名称 并不附带服务器地址

                            // 处理图片地址
                            this.carouselForm.imageUrl = this.GLOBAL.serverBaseUrl + this.GLOBAL.crsPostImg + this.carouselForm.imageUrl;

                        }else {  /*添加失败*/
                            this.$message({
                                showClose: true,
                                duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                                message: req.data.rs.msg,
                                type: 'error'
                            });
                        }
                    }
                });
            }
        },
        mounted(){

        },
        methods:{
            /*提交编辑的数据*/
            submitEdit(){
                /*提交除密码、邮箱、角色之外的信息到后台进行更新*/
                let formData = new FormData(document.getElementById("carouselForm"));
                // 后端用 对象接收，这里注意键名要和 对象的属性名一致
                formData.append("id", this.carouselForm.id);
                formData.append("postId", this.carouselForm.postId);
                formData.append("describe", this.carouselForm.describe);

                // this.$http.post("http://localhost:8081/user/update", formData).then(req=>{
                this.$http.post(this.GLOBAL.serverBaseUrl + this.GLOBAL.carouselUpdCrs, formData).then(req=>{
                    if (req.data !== ''){
                        if (req.data.result_code === 200){ /*成功修改 */
                            /*跳转到 滚动帖设置列表页面获取最新结果  并提示更新成功！*/
                            this.$router.push({name:'carouselSettingAdmin', params:{updSuccess: "滚动帖修改成功！"}});
                        }else {   /*修改失败 */
                            /*提示修改失败 （不进行页面跳转）*/
                            this.$message.error(req.data.msg);
                        }
                    }else {
                        this.$message.error('糟糕，服务器出事了。。');
                    }
                });
            },

            /* 新打开页面跳转至 输入的帖子id对应的帖子详情 点击 “查询帖子” 链接时触发*/
            queryPost(){
                // 先判断 帖子id是否只包含数字
                if (!(this.isNumber(this.carouselForm.postId))){
                    this.$alert("滚动帖绑定的帖子编号只能是一个数字！请重新输入~", '错误', {
                        confirmButtonText: '确定',
                        type: 'error',
                    });
                }else { // 是数字则 新打开一个页面查询帖子详情
                    let routeUrl = this.$router.resolve({
                        path: "/postInfo",
                        /*这样传递的参数  好像会在地址栏显示出来*/
                        query: {pid: this.carouselForm.postId},
                    });

                    //以新标签页的方式打开
                    window.open(routeUrl.href, "_blank");
                }
            },

            /*判断是否为 数字， 如果是 返回 true ， 否则返回false*/
            isNumber(str){
                if (str !== null && str !== ''){
                    for (let i = 0; i < str.length; i++){
                        if(str.charAt(i) < '0' || str.charAt(i) > '9'){
                            return false;
                        }
                    }
                }
                return true;
            },

            /*添加一个 滚动帖， 点击“确定添加”按钮时  触发*/
            addCarousel(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let formData = new FormData(document.getElementById("carouselForm")); /*这里获取到的表单信息只有那个头像文件（只为他设置了name属性）*/
                        formData.append("postId", this.carouselForm.postId);
                        formData.append("describe", this.carouselForm.describe);

                        // this.$http.post("http://localhost:8081/category/add", formData).then(req=>{
                        this.$http.put(this.GLOBAL.serverBaseUrl + this.GLOBAL.carouselAdd, formData).then(req=>{
                            if (req.data !== ""){
                                if (req.data.result_code === 200){ /*添加成功   跳转至列表页 并提示结果*/
                                    this.$router.push({name:'carouselSettingAdmin', params:{addSuccess: "滚动帖添加成功！"}});

                                }else {
                                    this.$message({
                                        showClose: true,
                                        duration: 0, /*不自动关闭*/
                                        message: req.data.msg,
                                        type: 'error'
                                    });
                                }
                            }else {
                                this.$message.error('糟糕，服务器出事了。。');
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            /*顶部的返回 页头 点击返回时返回到 滚动帖设置页面 */
            goBack() {
                /*这里的 name 是 index.js 里的 设置的路由 name*/
                this.$router.push({name: "carouselSettingAdmin"});
            },

            /*修改图片时触发*/
            handleFileChange(file){
                console.log("handleFileChange123");
                //不知为什么， 在这里 直接file.type无法直接获取文件类型（undefined）， 不过可以 file.name 获取文件名
                var o = file.name;
                var pos=o.lastIndexOf('.');  //转义一下
                var fileType = o.substring(pos+1);
                fileType = fileType.toLowerCase(); //一律转为小写
                console.log("文件类型：" + fileType);

                const isJPG = (fileType === 'jpg' || fileType === 'png');
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG或者PNG 格式!');
                    return;
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                    return;
                }
                this.carouselForm.imageUrl = URL.createObjectURL(file.raw);
            },
            /*上传前触发   -- 检测文件类型*/
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            /*图片上传成功和失败时 触发的钩子函数*/
            handleAvatarSuccess(res, file) {
                alert("上传成功。");
                this.postBarForm.imageUrl = URL.createObjectURL(file.raw);
            },
            handleAvatarError(){
                alert("上传失败。");
            },
        },
        components:{

        }
    }
</script>

<style scoped>
    /* “轮播帖编辑” 标题*/
    h1{
        font-size: 27px;
    }

    /*页头  返回 - 置顶管理*/
    .page_head{
        margin-top: 10px;
        margin-bottom: 20px;
    }

    /*滚动图上传框样式*/
    .avatar-uploader{
        border: 1px dashed #c6c6c6;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 178px;
        height: 178px;
    }
    .avatar-uploader:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>